<template>
  <div>
    <div class="site common" v-for="cinema in cinemaList" :key="cinema.id">
        <div class="left">
            <a href="">{{cinema.cinemaName}}</a>
            <p class="address">地址：{{cinema.cinemaAddress}}</p>
            <div class="tags">
                <span>退</span>
                <span>改签</span>
                <span>折扣卡</span>
            </div>
        </div>

        <div class="btn">
            <a @click="buyTicket(movie.id,cinema.id)">选座购票</a>
        </div>

        <div class="right">
            <span style="font-size: 15px; color: red; font-weight: 600;">{{cinema.cinemaPrice}}</span>
            <span class="bolck">28km</span>
        </div>

        
    </div>
  </div>
</template>

<script setup>
import { defineProps } from 'vue';
import router from '../../../router';
const props = defineProps({
    cinemaList: {
    type: Array,
    required: true
  },
  movie:{
    type: Object,
    required: false
  }
});
const buyTicket= (movieId,cinemaId)=>{
  debugger
router.push(`/sala/${movieId}/${cinemaId}`)
}
</script>

<style scoped>
.site{
    width: 1280px;
    margin: 10px auto;
    padding-bottom: 10px;
    border-bottom: 1px dashed #ccc;
}

.site .left .address{
    font-size: 14px;
    line-height: 14px;
    color: #999;
    margin: 7px 0;
}

.site .left .tags span{
    display: inline-block;
    border: .7px solid #509fc9;
    border-radius: 3px;
    padding: 0 2px;
    margin-right: 8px;
    color:  #509fc9;
    font-size: 10px;
}

.site .right{
    float: right;
    margin-top: -45px;
    margin-right: 110px;
    font-size: 12px;
    color: #999;
}
.site .right .bolck{
    margin: 10px 0;
}

.site .btn{
    float: right;
    margin-top: -45px;
}


.site .btn a{
    border-radius: 20px;
    background: #F40;
    color: #fff;
    padding: 10px;
    box-shadow: 0 2px 10px -2px #f03d37;

}

.site .right .bolck{
    display: block;
}
</style>